<template>
<!-- 产品销售排名 -->
  <div class="container-box">
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="ASIN" label="ASIN" width="200"></el-table-column>
      <el-table-column prop="sell_numb" label="销售数量" width="200"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="unit_price" label="平均价格" width="200"></el-table-column>
      <el-table-column prop="amount_price" label="总价" width="200"></el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
export default {
  data() {
    return {
      totalPage: 300,
      tableData: [
        {
          ASIN: "B07NRM675Q",
          sell_numb: "24",
          title: "ZHJ2019-07-05",
          unit_price:"9.00",
          amount_price:"216.00"
        },
        {
          ASIN: "B07NRM675Q",
          sell_numb: "24",
          title: "ZHJ2019-07-05",
          unit_price:"9.00",
          amount_price:"216.00"
        },
        {
          ASIN: "B07NRM675Q",
          sell_numb: "24",
          title: "ZHJ2019-07-05",
          unit_price:"9.00",
          amount_price:"216.00"
        },
        {
          ASIN: "B07NRM675Q",
          sell_numb: "24",
          title: "ZHJ2019-07-05",
          unit_price:"9.00",
          amount_price:"216.00"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      input2: "",
      DateValue: ""
    };
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    }
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
}
</style>